.base {
  padding: var(--cui-spacings-giga);
  font-weight: var(--cui-font-weight-regular);
  background-color: var(--cui-bg-normal);
  border-bottom: var(--cui-border-width-kilo) solid var(--cui-border-divider);
  transition:
    background-color var(--cui-transitions-default),
    color var(--cui-transitions-default);
}

.base[scope="col"] {
  padding: var(--cui-spacings-byte) var(--cui-spacings-giga);
  font-size: var(--cui-body-s-font-size);
  font-weight: var(--cui-font-weight-bold);
  line-height: var(--cui-body-s-line-height);
  vertical-align: middle;
  color: var(--cui-fg-subtle);
  white-space: nowrap;
}

.hover {
  background-color: var(--cui-bg-normal-hovered);
}

@media (max-width: 767px) {
  .fixed {
    position: sticky;
    left: 0;
    z-index: var(--cui-z-index-absolute);
    width: 145px;
    overflow-wrap: break-word;
  }

  .fixed::after {
    position: absolute;
    top: 0;
    left: 100%;
    width: 6px;
    height: 100%;
    content: "";
    background: linear-gradient(90deg, rgb(0 0 0 / 12%), rgb(255 255 255 / 0%));
  }
}

.condensed {
  padding: var(--cui-spacings-kilo) var(--cui-spacings-mega)
    var(--cui-spacings-kilo) var(--cui-spacings-giga);
  font-size: var(--cui-body-s-font-size);
  line-height: var(--cui-body-s-line-height);
  vertical-align: middle;
}

.condensed[scope="col"] {
  padding: var(--cui-spacings-byte) var(--cui-spacings-mega)
    var(--cui-spacings-byte) var(--cui-spacings-giga);
}

/* Alignment */

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

/* Sortable */

.base[aria-sort] {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.base[aria-sort]:focus-within::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
  content: "";
  box-shadow:
    0 0 0 2px var(--cui-bg-normal),
    0 0 0 4px var(--cui-border-focus);
}

.base[aria-sort]:focus-within,
.base[aria-sort]:hover {
  color: var(--cui-fg-accent-hovered);
  background-color: var(--cui-bg-normal-hovered);
}

.base[aria-sort]:focus-within > button,
.base[aria-sort]:hover > button {
  opacity: 1;
}

.base[aria-sort]:active {
  color: var(--cui-fg-accent-pressed);
  background-color: var(--cui-bg-normal-pressed);
}

.base[aria-sort="ascending"] > button,
.base[aria-sort="descending"] > button {
  opacity: 1;
}
